<!-- 头部导航栏组件 -->
<template>
  <el-header class="header">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        v-for="(route, index) in breadcrumbRoutes"
        :key="index"
        :to="route.meta.breadcrumbTo"
      >
        {{ route.meta.breadcrumbTitle }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <span class="welcome-text">欢迎你，yy</span>
    <el-avatar
      size="small"
      src="https://pic1.zhimg.com/v2-89c4797c977697997979797979797979_r.jpg"
    />
  </el-header>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const breadcrumbRoutes = ref([]);

const generateBreadcrumb = () => {
  // 过滤出有 breadcrumbTitle 的路由
  breadcrumbRoutes.value = route.matched.filter(item => item.meta.breadcrumbTitle);
};

watch(
  () => route.path,
  () => {
    generateBreadcrumb();
  },
  { immediate: true }
);

generateBreadcrumb();
</script>

<style scoped>
.header {
  background-color: #f5f7fa;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text {
  margin-right: 15px;
}
</style>
